<template>
  <div>
    <navigation-bar />
    <el-row :gutter="20">
      <el-col :span="5" class="side-text left-side">
        <h1 v-for="(char, index) in leftText" :key="index" class="big-char animated fadeInUp" :style="{ animationDelay: `${index * 0.3}s` }">{{ char }}</h1>
      </el-col>
      <el-col :span="14">
        <div class="personal-info-container">
          <h1>个人信息</h1>
          <div class="avatar-container">
            <img :src="personalInfo.avatar"  class="avatar-image" v-if="personalInfo.avatar" />
            <div v-else class="no-avatar">暂无头像</div>
            <el-upload
                class="upload-avatar"
                action="oss-cn-wuhan-lr.aliyuncs.com"
                :before-upload="beforeUpload"
                :http-request="uploadAvatar"
                :show-file-list="false"
            >
              <el-button  type="primary">编辑头像</el-button>
            </el-upload>
          </div>
          <div class="info-section">
            <h2>基本信息</h2>
            <div class="info-item">
              <label>姓名:</label>
              <input v-model="personalInfo.nickname" class="editable-input" placeholder="请输入姓名" />
            </div>
            <div class="info-item">
              <label>性别:</label>
              <select v-model="personalInfo.gender" class="editable-select">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="info-item">
              <label>出生年月日:</label>
              <input v-model="personalInfo.birthday" class="editable-input" type="date" placeholder="请选择出生年月日" />
            </div>
            <div class="info-item">
              <label>民族:</label>
              <input v-model="personalInfo.nationality" class="editable-input" placeholder="请输入民族" />
            </div>
            <div class="info-item">
              <label>籍贯:</label>
              <input v-model="personalInfo.nativePlace" class="editable-input" placeholder="请输入籍贯" />
            </div>
            <div class="info-item">
              <label>身份证号:</label>
              <input v-model="personalInfo.idNumber" class="editable-input" placeholder="请输入身份证号" />
            </div>
            <div class="info-item">
              <label>联系方式:</label>
              <input v-model="personalInfo.phone" class="editable-input" placeholder="请输入联系方式" />
            </div>
            <div class="info-item">
              <label>常用邮箱:</label>
              <input v-model="personalInfo.email" class="editable-input" placeholder="请输入常用邮箱" />
            </div>
            <div class="info-item">
              <label>居住城市:</label>
              <input v-model="personalInfo.city" class="editable-input" placeholder="请输入居住城市" />
            </div>
          </div>
          <button @click="saveInfo" class="save-button">保存</button>
        </div>
      </el-col>
      <el-col :span="5" class="side-text right-side">
        <h1 v-for="(char, index) in rightText" :key="index" class="big-char animated fadeInUp" :style="{ animationDelay: `${index * 0.3}s` }">{{ char }}</h1>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref ,onMounted } from 'vue';
import axios from "axios";
import NavigationBar from '@/components/NavigationBar.vue'
import {ElMessage} from "element-plus";
import qs from 'qs';


const user= ref(getUser());
const searchUserForm = ref({
 id: user.value.id
})
const findUserInfo = () => {
  const data =qs.stringify(searchUserForm.value)

  axios.get(BASEURL+'/admin/query?'+data)
  .then(response => {
    if (response.data.code === 2000) {
      personalInfo.value = response.data.data[0];
      personalInfo.value.gender = response.data.data.gender === 1 ? '男' : '女';
      if(personalInfo.value.avatar){

      }
    }else {
      console.log(response.data.message);
    }
  })
};
const personalInfo = ref({
  nickname: '',
  gender: '',
  birthday: '',
  nationality: '', // 民族
  nativePlace: '', // 籍贯
  idNumber: '', // 身份证号
  phone: '', // 联系方式
  email: '', // 常用邮箱
  city: '', // 居住城市
  avatar: ''//头像地址
});

const saveInfo = () => {
  console.log('保存个人信息:', personalInfo.value);
  axios.post(BASEURL+'/admin/save', personalInfo.value)
  .then(response => {
    if (response.data.code === 2000) {
      ElMessage.success('保存成功');
    } else {
      ElMessage.error(response.data.message);
    }
  })
};
const beforeUpload = (file) => {
  const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPGorPNG) {
    ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!');
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPGorPNG && isLt2M;
};

const uploadAvatar = (options) => {
  const { file } = options;
  const formData = new FormData();
  formData.append('file', file);
  axios.post(BASEURL + '/common/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
      .then(response => {
        if (response.data.code === 2000) {
          personalInfo.value.avatar = response.data.data;
          console.log('头像上传成功:', personalInfo.value.avatar)
          ElMessage.success('头像上传成功');

        } else {
          ElMessage.error('头像上传失败: ' + response.data.message);
        }
      })
      .catch(error => {
        console.error('头像上传失败:', error);
        ElMessage.error('头像上传失败');
      });
};
const leftText = ['我', '是', '牛', '马'];
const rightText = ['牛', '马', '是', '我'];

onMounted(() => {
  console.log('user的值：'+user.value.id)
  findUserInfo();
});


</script>


<style scoped>
.avatar-container {
  text-align: center;
  margin-bottom: 40px; /* 增加底部间距 */
  width: 200px; /* 增加宽度 */
  height: 200px; /* 增加高度 */
  position: relative; /* 添加相对定位 */
}

.avatar-image {
  width: 50%; /* 使图片宽度占满容器 */
  height: 50%; /* 使图片高度占满容器 */
  border-radius: 50%;
  object-fit: cover; /* 保持图片比例并裁剪 */
}

.no-avatar {
  font-size: 16px;
  color: #999;
}


.personal-info-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.info-section {
  margin-bottom: 20px;
}

.info-section h2 {
  font-size: 20px;
  color: #409EFF;
  margin-bottom: 15px; /* 增加间距 */
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px; /* 增加间距 */
}

.info-item label {
  width: 120px;
  font-weight: bold;
  color: #666;
  margin-right: 10px; /* 增加间距 */
}

.editable-input,
.editable-select {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.editable-input:focus,
.editable-select:focus {
  border-color: #409EFF;
  outline: none;
}

.save-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #409EFF;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  margin-top: 15px; /* 增加间距 */
}

.save-button:hover {
  background-color: #66b1ff;
}

.save-button:active {
  background-color: #337ab7;
}

/* 美化左右两边的文字 */
.side-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to bottom, #4CAF50, #8BC34A);
  color: white;
  font-size: 48px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.left-side {
  background: linear-gradient(to bottom, #FFC107, #FF9800);
}

.right-side {
  background: linear-gradient(to bottom, #2196F3, #0D47A1);
}

.big-char {
  margin: 10px 0;
  opacity: 0;
}

/* 添加动画效果 */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}
</style>
